<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        a {
            text-decoration: none;
        }

        .head-container {
            height: 40px;
            background-color: black;
        }

        .head-wrapper {
            width: 1200px;
            height: 100%;
            margin: 0 auto;
            display: flex;
            justify-content: space-between;

        }

        .left-damiwang {
            width: 650px;
            height: 100%;


        }

        .left-damiwang ul {
            height: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;

        }

        .left-damiwang ul li {
            color: #999;
            font-size: 12px;

        }

        .left-damiwang ul li:not(.last)::after {
            content: "|";
            margin: 10px;
            color: #999;
        }

        .right-damiwang {
            width: 250px;
            height: 100%;
            display: flex;
            justify-content: space-between;
        }

        .denglu {
            width: 100px;
        }

        .gouwuche {
            width: 100px;
        }

        .mi-wrapper {
            width: 1200px;
            margin: 0 auto;

        }

        .mi-pic {
            width: 100%;
            height: 60px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin: 10px 0;
        }

        .left-mi {
            width: 50px;
            height: 50px;
        }

        .middle-mi {
            width: 700px;
            height: 100%;

        }

        .middle-mi ul {
            height: 50px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .right-mi {
            width: 250px;
            height: 50px;
            border: 1px solid #999;
        }

        .xuanxiang-pics {
            width: 100%;
            height: 350px;
            display: flex;

        }

        .left-list {
            width: 250px;
            height: 100%;

        }

        .left-list ul {
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: space-around;



        }

        .left-list ul li {
            height: 50px;
            display: flex;
            justify-content: space-around;
            align-items: center;
        }

        .right-pic {
            width: 950px;

        }

        .right-pic img {
            width: 100%;
            height: 350px;
        }

        .kaifanggoumai-pic {
            height: 150px;
            margin-top: 15px;
            display: flex;
            justify-content: space-between;
            margin-bottom: 10px;
        }

        .left-kaifanggoumai {
            width: 250px;
            height: 100%;
            background-color: saddlebrown;
        }

        .left-kaifanggoumai ul {
            height: 100%;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            align-items: center;

        }

        .left-kaifanggoumai ul li {
            text-align: center;
            width: 70px;
            height: 73px;
            border-right: 1px solid #999;
            border-bottom: 1px solid #999;
            font-size: 14px;
        }
        .left-kaifanggoumai ul li p{
            margin-top: 10px;
        }

        .right-kaifanggoumai {
            width: 950px;

        }

        .right-kaifanggoumai ul {
            width: 950px;
            display: flex;
            justify-content: space-around;
        }

        .right-kaifanggoumai ul li {
            width: 250px;

        }

        .right-kaifanggoumai ul li img {
            height: 150px;
        }

        .head-mingxing {
            height: 40px;
            display: flex;
            justify-content: space-between;
        }

        .head-mingxing h3 {
            font-size: 24px;
            font-weight: 400;
        }

        .right-mingxing {
            display: flex;
            justify-content: space-around;
            align-items: center;
        }

        .head-mingxing .right-mingxing span {
            display: inline-block;
            font-size: 16px;
            width: 40px;
            height: 20px;
            text-align: center;
            border: 1px solid #999999;
        }

        .mingxing-pics {
            height: 250px;
        }

        .mingxing-pics ul {

            height: 250px;
            display: flex;
            justify-content: space-between;
            align-items: center;

        }

        .mingxing-pics ul li {
            width: 200px;
            height: 100%;
            background-color: #FAFAFA;
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .mingxing-pics ul li p,
        .mingxing-pics ul li span {
            font-size: 14px;
        }

        .zhineng-wrapper {
            margin-top: 30px;
            background-color: #FAFAFA;


        }

        .head-zhineng {
            width: 1100px;
            height: 50px;
            margin: 0 auto;
            padding-bottom: 20px;
            box-sizing: border-box;
        }

        .head-zhineng h3 {
            font-size: 24px;
            font-weight: 400;
        }

        .main-pics {
            width: 1100px;
            height: 600px;
            margin: 0 auto;
            display: flex;
            justify-content: space-between;
        }



        .left-kongqi img {

            height: 100%;
        }

        .right-pics ul {
            width: 793px;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
        }

        .right-pics ul li {

            margin-bottom: 40px;
            width: 180px;
            height: 280px;
            background-color: #fff;
            display: flex;
            flex-direction: column;
            align-items: center;

        }

        .right-pics ul li p {
            font-size: 14px;

        }

        .right-pics ul li i {
            font-style: normal;
            font-size: 12px;
            color: #999;
        }

        .right-pics ul li span {
            display: inline-block;
            margin-top: 10px;
            color: orange;
            font-size: 14px;
        }

        .weibu-wrapper {
            background-color: #FAFAFA;
            padding-top: 50px;
        }

        .zongti {
            width: 1200px;
            margin: 0 auto;
            background-color: #fff;
            border-bottom: 1px solid #999999;
        }

        .head-weibu {
            width: 1000px;
            margin: 0 auto;

        }

        .head-weibu ul {
            height: 70px;
            display: flex;
            justify-content: space-around;
            align-items: center;

        }

        .head-weibu ul li {
            width: 180px;
            font-size: 14px;
            color: #999;
        }

        .head-weibu ul li:not(.last)::after {
            content: "|";
            margin: 40px;
        }

        .main-bangzhu {

            height: 250px;
            display: flex;
            justify-content: space-around;
            align-items: center;
        }

        .left-bangzhu {
            height: 100%;
            width: 590px;
            display: flex;
            margin-top: 20px;
        }

        .left-bangzhu ul {
            width: 140px;
            height: 200px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: space-around;
        }

        .left-bangzhu ul li {

            color: #999999;
        }

        .left-bangzhu ul strong {
            color: #333;
        }

        .right-bangzhu {
            width: 250px;
            height: 150px;
            text-align: center;
            border-left: 1px solid #999;
        }

        .right-bangzhu p {
            font-size: 18px;
            color: orange;
        }

        .right-bangzhu i {
            font-style: normal;
        }

        .right-bangzhu span {
            display: inline-block;
            margin-top: 10px;
            width: 125px;
            height: 30px;
            color: orange;
            border: 1px solid orange;

        }

        .dami-logo {
            width: 1200px;
            margin: 0 auto;
            display: flex;
            align-items: center;
            padding-top: 20px;
        }

        .logo-dami {
            width: 50px;
            height: 50px;
        }

        .dami-logo ul {
            display: flex;
        }

        .dami-logo ul li {
            color: #999999;
        }

        .dami-logo ul li:not(.last)::after {
            content: "|";

        }

        .login,
        .zhuce,
        .gouwuche {
            font-size: 12px;
            color: #999;
            text-align: center;

        }

        .login,
        .zhuce {
            position: absolute;
        }

        .zhuce {
            right: 0;
        }

        .login {
            right: 26px;
        }

        .denglu {

            display: flex;
            position: relative;
            align-items: center;
        }

        .gouwuche {
            flex: 1;
            line-height: 40px;
        }

        .left-mi img {
            width: 50px;
            height: 50px;
        }

        .left-mi {
            background-color: black;
        }

        .right-mi {
            display: flex;
            justify-content: space-between;
        }

        .right-mi .left {
            width: 200px;
        }

        .right-mi .right {
            text-align: center;
            line-height: 50px;
            flex: 1;
            border-left: 1px solid #999;
        }

        .logo-dami img {
            width: 50px;
            height: 50px;
            background-color: orange;
        }

        .left-list {
            background-color: peru;
        }


        .logo-wrapper {
            background-color: #FAFAFA;
        }
    </style>
</head>

<body>
    <div class="head-container">
        <div class="head-wrapper">
            <div class="left-damiwang">
                <ul>
                    <li>大米网</li>
                    <li>大米网</li>
                    <li>大米网</li>
                    <li>大米网</li>
                    <li>大米网</li>
                    <li>大米网</li>
                    <li>大米网</li>
                    <li>大米网</li>
                    <li>大米网</li>
                </ul>
            </div>
            <div class="right-damiwang">
                <div class="denglu">
                    <div class="login">登录|</div>
                    <div class="zhuce">注册</div>
                </div>
                <div class="gouwuche">购物车(0)</div>
            </div>
        </div>
        <div class="mi-wrapper">
            <div class="mi-pic">
                <div class="left-mi">
                    <img src="./image/mi-logo.png" alt="">
                </div>
                <div class="middle-mi">
                    <ul>
                        <li>大米手机</li>
                        <li>大米手机</li>
                        <li>大米手机</li>
                        <li>大米手机</li>
                        <li>大米手机</li>
                        <li>大米手机</li>
                        <li>大米手机</li>
                        <li>大米手机</li>
                        <li>大米手机</li>
                    </ul>
                </div>
                <div class="right-mi">
                    <div class="left"></div>
                    <div class="right">GO</div>
                </div>
            </div>
            <div class="xuanxiang-pics">
                <div class="left-list">
                    <ul>
                        <li>手机 平板<span>&gt;</span></li>
                        <li>手机 平板<span>&gt;</span></li>
                        <li>手机 平板<span>&gt;</span></li>
                        <li>手机 平板<span>&gt;</span></li>
                        <li>手机 平板<span>&gt;</span></li>
                        <li>手机 平板<span>&gt;</span></li>
                        <li>手机 平板<span>&gt;</span></li>
                        <li>手机 平板<span>&gt;</span></li>
                        <li>手机 平板<span>&gt;</span></li>
                        <li>手机 平板<span>&gt;</span></li>
                    </ul>
                </div>
                <div class="right-pic">
                    <img src="./image/T1vWdTBKDv1RXrhCrK.jpg" alt="">
                </div>
            </div>
            <div class="kaifanggoumai-pic">
                <div class="left-kaifanggoumai">
                    <ul>
                        <li>
                            <p>START</p><span>开放购买</span>
                        </li>
                        <li>
                            <p>START</p><span>开放购买</span>
                        </li>
                        <li>
                            <p>START</p><span>开放购买</span>
                        </li>
                        <li>
                            <p>START</p><span>开放购买</span>
                        </li>
                        <li>
                            <p>START</p><span>开放购买</span>
                        </li>
                        <li>
                            <p>START</p><span>开放购买</span>
                        </li>
                    </ul>
                </div>
                <div class="right-kaifanggoumai">
                    <ul>
                        <li><img src="./image/T184E_BQWT1RXrhCrK.jpg" alt=""></li>
                        <li><img src="./image/T184E_BQWT1RXrhCrK.jpg" alt=""></li>
                        <li><img src="./image/T184E_BQWT1RXrhCrK.jpg" alt=""></li>
                    </ul>
                </div>
            </div>
            <div class="dami-mingxing">
                <div class="head-mingxing">
                    <div class="left-mingxing">
                        <h3>大米明星单品</h3>

                    </div>
                    <div class="right-mingxing">
                        <span>&lt;</span>
                        <span>&gt;</span>
                    </div>
                </div>
                <div class="mingxing-pics">
                    <ul>
                        <li><img src="./image/T10TJjB5hT1RXrhCrK.jpg" alt="">
                            <p>大米头戴式耳机</p><span>媲美主流千元机头戴耳机</span>
                        </li>
                        <li><img src="./image/T10TJjB5hT1RXrhCrK.jpg" alt="">
                            <p>大米头戴式耳机</p><span>媲美主流千元机头戴耳机</span>
                        </li>
                        <li><img src="./image/T10TJjB5hT1RXrhCrK.jpg" alt="">
                            <p>大米头戴式耳机</p><span>媲美主流千元机头戴耳机</span>
                        </li>
                        <li><img src="./image/T10TJjB5hT1RXrhCrK.jpg" alt="">
                            <p>大米头戴式耳机</p><span>媲美主流千元机头戴耳机</span>
                        </li>
                        <li><img src="./image/T10TJjB5hT1RXrhCrK.jpg" alt="">
                            <p>大米头戴式耳机</p><span>媲美主流千元机头戴耳机</span>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="zhineng-wrapper">
            <div class="head-zhineng">
                <h3>智能硬件</h3>
            </div>
            <div class="main-pics">
                <div class="left-kongqi">
                    <img src="./image/T1IhLjBC_T1RXrhCrK.jpg" alt="">
                </div>
                <div class="right-pics">
                    <ul>
                        <li><img src="./image/T1odEjB5bT1RXrhCrK.jpg" alt="">
                            <p>大米智能家庭套装</p><i>3分钟快速安装，30多种智能玩法</i><span>199元</span>
                        </li>
                        <li><img src="./image/T1odEjB5bT1RXrhCrK.jpg" alt="">
                            <p>大米智能家庭套装</p><i>3分钟快速安装，30多种智能玩法</i><span>199元</span>
                        </li>
                        <li><img src="./image/T1odEjB5bT1RXrhCrK.jpg" alt="">
                            <p>大米智能家庭套装</p><i>3分钟快速安装，30多种智能玩法</i><span>199元</span>
                        </li>
                        <li><img src="./image/T1odEjB5bT1RXrhCrK.jpg" alt="">
                            <p>大米智能家庭套装</p><i>3分钟快速安装，30多种智能玩法</i><span>199元</span>
                        </li>
                        <li><img src="./image/T1odEjB5bT1RXrhCrK.jpg" alt="">
                            <p>大米智能家庭套装</p><i>3分钟快速安装，30多种智能玩法</i><span>199元</span>
                        </li>
                        <li><img src="./image/T1odEjB5bT1RXrhCrK.jpg" alt="">
                            <p>大米智能家庭套装</p><i>3分钟快速安装，30多种智能玩法</i><span>199元</span>
                        </li>
                        <li><img src="./image/T1odEjB5bT1RXrhCrK.jpg" alt="">
                            <p>大米智能家庭套装</p><i>3分钟快速安装，30多种智能玩法</i><span>199元</span>
                        </li>
                        <li><img src="./image/T1odEjB5bT1RXrhCrK.jpg" alt="">
                            <p>大米智能家庭套装</p><i>3分钟快速安装，30多种智能玩法</i><span>199元</span>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="weibu-wrapper">
            <div class="zongti">
                <div class="head-weibu">
                    <ul>
                        <li>1小时快速服务</li>
                        <li>1小时快速服务</li>
                        <li>1小时快速服务</li>
                        <li>1小时快速服务</li>
                        <li>1小时快速服务</li>
                    </ul>
                </div>
                <div class="main-bangzhu">
                    <div class="left-bangzhu">
                        <ul>
                            <li><strong>帮助中心</strong> </li>
                            <li>购物指南</li>
                            <li>购物指南</li>
                            <li>购物指南</li>
                        </ul>
                        <ul>
                            <li><strong>服务支持</strong></li>
                            <li>购物指南</li>
                            <li>购物指南</li>
                            <li>购物指南</li>
                        </ul>
                        <ul>
                            <li><strong>大米之家</strong></li>
                            <li>购物指南</li>
                            <li>购物指南</li>
                            <li>购物指南</li>
                        </ul>
                        <ul>
                            <li><strong>关注我们</strong></li>
                            <li>购物指南</li>
                            <li>购物指南</li>
                            <li>购物指南</li>
                        </ul>
                    </div>
                    <div class="right-bangzhu">
                        <p><strong>400-100-5678</strong> </p>
                        <i>周一至周日8:00-18:00</i>
                        <div>（仅收市话费）</div>
                        <span>24小时在线客服</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="logo-wrapper">
            <div class="dami-logo">
                <div class="logo-dami">
                    <img src="./image/mi-logo.png" alt="">
                </div>
                <ul>
                    <li>大米网</li>
                    <li>大米网</li>
                    <li>大米网</li>
                    <li>大米网</li>
                    <li>大米网</li>
                    <li>大米网</li>
                    <li>大米网</li>
                    <li>大米网</li>
                    <li>大米网</li>
                    <li>大米网</li>
                    <li>大米网</li>
                </ul>
            </div>
        </div>
    </div>
</body>

</html>